<template>
	<div class="hello">
		{{comMsg}}
		<input type="text" v-model="msg" @keyup.enter="submit">
		<button @click="submit">发送</button>
	</div>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Watch,
		Vue
	} from 'vue-property-decorator';

	@Component
	export default class HelloWorld extends Vue {
		// @Prop() private msg!: string;
		msg: string = 'hhh';
		socket!: any;

		get comMsg(): string{
			// 用get方法实现computed
			return 'computed:' + this.msg;
		} 
		
		@Watch('msg')
		msgChange(newVal: string, oldVal: string){
			// 引入Watch装饰器 实现watch
			console.log('watch:',newVal);
		}
		
		submit() {
			this.$socket.send(this.msg);
		}

		created(){
			this.$socket.on('message', (msg: any) => {
				console.log(msg)
			});
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
